<template>
  <div class="page-container">
    <div class="page-header">
      <h2>页面菜单管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleAdd">
          <Plus /> 添加菜单
        </el-button>
      </div>
    </div>

    <el-card>
      <el-table
        :data="menuList"
        row-key="menu_id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        style="width: 100%"
        row-height="24"
        size="small"
      >
        <el-table-column prop="menu_code" label="菜单编码" width="200" />
        <el-table-column prop="menu_name" label="菜单名称" width="250" />
        <!-- 修改菜单类型显示 -->
        <el-table-column label="菜单类型" width="90">
          <template #default="{ row }">
            {{ getMenuTypeText(row.menu_type) }}
          </template>
        </el-table-column>

        <el-table-column label="图标" width="50">
          <template #default="{ row }">
            <el-icon v-if="row.icon">
              <component :is="getIconComponent(row.icon)" class="menu-icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑/添加菜单对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" draggable> <!-- 增加对话框宽度 -->
      <el-form :model="form" label-width="120px">
        <el-form-item label="菜单编码" prop="menu_code" class="custom-width-item">
          <el-input v-model="form.menu_code" placeholder="请输入菜单编码" />
        </el-form-item>

        <el-form-item label="菜单名称" prop="menu_name" class="custom-width-item">
          <el-input v-model="form.menu_name"  placeholder="请输入菜单名称" />
        </el-form-item>

        <el-form-item label="菜单类型" prop="menu_type" class="custom-width-item">
          <el-radio-group v-model="form.menu_type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="父菜单">
          <el-select v-model="form.parent_id" placeholder="选择父菜单">
            <el-option label="顶级菜单" value="0" />
            <el-option
              v-for="item in menuList"
              :key="item.menu_id"
              :label="item.menu_name"
              :value="item.menu_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.icon" placeholder="图标名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useSysMenuStore } from '@/stores/sys/SysMenuStore'
import { Plus } from '@element-plus/icons-vue'
import { getIconComponent } from '@/utils/iconUtils'

// 获取菜单数据
const menuStore = useSysMenuStore()

// 计算属性获取菜单列表
const menuList = computed(() => {
  return menuStore.menuList || []
})

// 对话框状态
const dialogVisible = ref(false)
const dialogTitle = ref('添加菜单')

// 添加缺失的form定义 - 这是修复的关键
const form = reactive({
  menu_id: '',
  menu_code: '',
  menu_name: '',
  menu_type: 1, // 数字1表示目录
  parent_id: '0',
  icon: ''
})

// 添加菜单类型转换函数
const getMenuTypeText = (type) => {
  const typeMap = {
    1: '目录',
    2: '菜单',
    3: '按钮'
  }
  return typeMap[type] || type
}

// 组件挂载时加载菜单数据
onMounted(async () => {
  await menuStore.fetchMenuList()
})

// 打开添加对话框
const handleAdd = () => {
  dialogTitle.value = '添加菜单'
  Object.assign(form, {
    menu_id: '',
    menu_code: '',
    menu_name: '',
    menu_type: 1, // 改为数字1表示目录
    parent_id: '0',
    icon: ''
  })
  dialogVisible.value = true
}

// 打开编辑对话框
const handleEdit = (row) => {
  dialogTitle.value = '编辑菜单'
  Object.assign(form, {
    ...row,
    parent_id: row.parent_id?.toString() || '0',
    menu_type: row.menu_type || 1 // 改为1而不是'catalog'
  })
  dialogVisible.value = true
}

// 保存菜单
const handleSave = async () => {
  try {
    if (dialogTitle.value === '添加菜单') {
      // 调用store的addMenu方法添加菜单
      const success = await menuStore.addMenu(form)
      if (success) {
        // 添加成功后重新获取菜单列表
        await menuStore.fetchMenuList()
      }
    } else {
      // 确保menu_id是有效的数字
      const menuId = Number(form.menu_id);

      if (isNaN(menuId) || menuId <= 0) {
        console.error('无效的菜单ID:', form.menu_id);
        // 可以在这里显示错误提示给用户
        return;
      }

      // 修复类型转换问题，确保menu_id是数字类型
      const success = await menuStore.updateMenu(menuId, form)
      if (success) {
        // 更新成功后重新获取菜单列表
        await menuStore.fetchMenuList()
      }
    }
    dialogVisible.value = false
  } catch (error) {
    console.error('保存菜单失败:', error);
    // 可以在这里添加用户友好的错误提示
  }
}

// 删除菜单
const handleDelete = async (row) => {
  try {
    // 调用store的deleteMenu方法删除菜单
    const success = await menuStore.deleteMenu(row.menu_id)
    if (success) {
      // 删除成功后重新获取菜单列表
      await menuStore.fetchMenuList()
    }
  } catch (error) {
    console.error('删除菜单失败:', error)
  }
}
</script>

<style scoped>
.page-container {
  padding: 10px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.menu-icon {
  font-size: 12px;
  color: #409eff;
}

:deep(.el-table__row td) {
  padding: 0;
  font-size: 12px;
  line-height: 24px;
}

:deep(.el-table__header tr th) {
  padding: 0;
  font-size: 12px;
  line-height: 24px;
}

</style>
